<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="取消订单"
            :hasBack="true"
            :hasHome="true"
        >
        </common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >
            <!-- 退货订单编号 -->
            <div class="cancle-order-top">
                <span class="cancle-name">取消原因</span>
            </div>
            <!-- 退货订单编号 -->

            <!-- 退货原因选择 -->
            <div class="reason-select">
                <div
                    class="reason-item"
                    v-for="(item,index) of reasonList"
                    :key="index"
                >
                    <radio
                        radioName="cancle-reason"
                        @radioClick="selectReason(item.reasonId)"
                    ></radio>
                    <span class="reason-name">{{item.reasonName}}</span>
                </div>
            </div>
            <!-- 退货原因选择 -->
        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <!-- 确认取消 -->
        <div class="submit-btn">确认取消</div>
        <!-- 确认取消 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import Radio from '@/components/Radio'
export default {
    name: 'OrderCancle',
    components: {
        CommonHeader,
        CommonScroll,
        Radio
    },
    data () {
        return {
            scrollStyle: {
                top: "1.11rem",
                left: "0",
                right: "0",
                bottom: "1.3rem",
            },
            reasonList: [
                {
                    reasonId: 0,
                    reasonName: '现在不想买了'
                },
                {
                    reasonId: 1,
                    reasonName: '拍错了，重新拍'
                },
                {
                    reasonId: 2,
                    reasonName: '卖家缺货'
                },
                {
                    reasonId: 3,
                    reasonName: '商品价格太贵'
                },
                {
                    reasonId: 4,
                    reasonName: '等待时间过长'
                },
                {
                    reasonId: 5,
                    reasonName: '其他原因'
                }
            ],
            reundReason: 0
        }
    },
    methods: {
        selectReason (id) {
            this.reundReason = id
        }
    }
}
</script>

<style lang="stylus" scoped>
.cancle-order-top
    display flex
    justify-content space-between
    align-items center
    height 1.11rem
    padding 0 0.26rem
    background #fff
    .cancle-name
        font-size 0.38rem
        color #333
.reason-select
    padding-left 0.26rem
    background #fff
    border-top 1px solid #e5e5e5
    border-bottom 1px solid #e5e5e5
    .reason-item
        display flex
        align-items center
        height 1.11rem
        padding-left 0.1rem
        border-bottom 1px dashed #e5e5e5
        .reason-name
            font-size 0.33rem
            color #666
            margin-left 0.26rem
    .reason-item:last-child
        border none
.submit-btn
    position absolute
    bottom 0
    left 0
    right 0
    line-height 1.3rem
    text-align center
    font-size 0.38rem
    color #fff
    background #d7463c
</style>


